<template>
	<view>
		<view class="companyInfo">
			<view>
				企业号：{{userInfo.company_no}}
				部门：{{userInfo.department || '-'}}
			</view>
			<view>
				<view class="linkTxt" @click="quitLogin">退出</view>
			</view>
		</view>

		<view class="qiun-columns">
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
				<view class="qiun-title-dot-light">调查统计</view>
			</view>
			<view>
				<uni-calendar ref="calendar" :insert="false" @confirm="confirmCalendar"></uni-calendar>
				<button @click="openCalendar">{{nowDay}} 切换日期</button>
			</view>
			<view class="qiun-charts">
				<canvas v-if="pieData.length > 0" canvas-id="canvasPie" id="canvasPie" class="charts" @touchstart="touchPie"></canvas>
				<view v-if="pieData.length === 0" class="noData">
					暂无数据
				</view>
			</view>
		</view>
		<view class="action-row">
			<download-excel class="export-excel-wrapper" :data="json_data" :fields="json_fields" name="staffStat.xls">
				<!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
				<el-button type="primary" size="small">数据导出</el-button>
				<!-- <navigator >数据导出</navigator> -->
			</download-excel>
			<text> | </text>
			<navigator :url="detailUrl">详细列表</navigator>
		</view>
		
		<view style="align-items: center;justify-content: center; display: flex;">			
			<image class="qrcode" :src="ewm" mode="widthFix">				
                 <span @click="downloadCodeImg()"></span>
			</image>
		</view>
		<view style="color: #999999; align-items: center;justify-content: center; display: flex;">
			<H5>企业二维码</H5>
		    
		</view>
		<view style="color: #999999; align-items: center;justify-content: center; display: flex;">
			<H5>(扫码进入企业专属的员工打卡页)</H5>
		</view>
		<view class="action-row">
		     <navigator :url="ewm" >点击下载二维码</navigator>			 
		</view>
	</view>
	
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	import QR from '../../../common/qrcode.js';
	var _self;
	var canvaPie = null;
	const radioTxt = {
		1: '是',
		0: '否'
	};
	import moment from 'moment';
	import {
		mapState,
		mapMutations
	} from 'vuex';	
	let nowDay = moment().format('YYYY-MM-DD');
	export default {
		components: {
			uniCalendar
		},				
		data() {
			return {
				username: uni.getStorageSync('username'),//二维码
				ewm: '' ,//二维码				
                //codeImg:codeIMG,//二维码下载
				
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
				adviceTxt: {
					1: '可以直接上班',
					2: '专家判断是否需要隔离',
					3: '居家或到当地指定地点隔离14天',
					4: '去定点发烧门诊就诊',
					5: '常规感冒治疗'
				},
				nowDay: nowDay,
				detailUrl: '../index?day='+nowDay,
				pieData: [],
				json_data: [],
				json_fields: {
					'企业号': "company",
					'部门': "department",
					'工号': "jobnumber",
					'姓名': "name",
					'在过去的14天内，是否出过本地区': {
						field: "questionA",
						//自定义回调函数
						callback: value => {
							return radioTxt[value];
						}
					},
					'在过去的14天内，是否到过疫情高发区': {
						field: "questionA",
						//自定义回调函数
						callback: value => {
							return radioTxt[value];
						}
					},
					'在过去的14天内，是否与疫情高发区旅居人员接触': {
						field: "questionA",
						//自定义回调函数
						callback: value => {
							return radioTxt[value];
						}
					},
					'是否与疑似病例接触': {
						field: "questionA",
						//自定义回调函数
						callback: value => {
							return radioTxt[value];
						}
					},
					'在过去的14天内，是否经停疫情高发区': {
						field: "questionA",
						//自定义回调函数
						callback: value => {
							return radioTxt[value];
						}
					},
					'在过去的14天内，是否在外地乘坐公共交通工具（包括：火车，飞机，汽车等）': {
						field: "questionA",
						//自定义回调函数
						callback: value => {
							return radioTxt[value];
						}
					},
					'在过去的14天内，是否有发热，呼吸道症状等': {
						field: "questionA",
						//自定义回调函数
						callback: value => {
							return radioTxt[value];
						}
					},
					'筛查结果': {
						field: "advice",
						//自定义回调函数
						callback: value => {
							return this.adviceTxt[value];
						}
					},
					'其他情况说明': "extraInfo",
					'提交时间': {
						field: "createTime",
						//自定义回调函数
						callback: value => {
							return moment(value).format('YYYY-MM-DD HH:mm:ss');
						}
					}
				}
			}
		},
		computed: mapState(['hasLogin', 'userInfo']),		
		onLoad() {
			_self = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(750);
			let ewmurl = location.href.replace('/manager/stat/stat', `/form/form?id=${this.userInfo.company_no}`)
			console.log(ewmurl);
			this.ewm = QR.createQrCodeImg(ewmurl, {
				size: 350
			});
		},
		methods: {
			...mapMutations(['logout']),
			openCalendar() {
				this.$refs.calendar.open();
			},
			downloadCodeImg(){
			              console.log('下载图片')
			              var a = document.createElement('a')
			              a.download = name || 'pic'
			              // 设置图片地址
			              a.href = ewm;
			              a.click();
			            },
			confirmCalendar(e) {
				this.nowDay = e.fulldate;
				this.detailUrl = '../index?day='+this.nowDay;
				this.getData();
				this.getExcelData();
			},
			getData() {
				uni.showLoading({
					title: '处理中...'
				})
				uniCloud.callFunction({
					name: 'company_collect_stat',
					data: {
						company: this.userInfo.company_no,
						day: this.nowDay
					}
				}).then((res) => {
					console.log(res)
					uni.hideLoading()
					const resData = res.result && res.result.data ? res.result.data : [];
					this.pieData = resData;
					for (var i = 0, len = resData.length; i < len; i += 1) {
						resData[i].name = `${this.adviceTxt[resData[i]._id]}:${resData[i].data}人`;
					}
					const chartData = {
						"series": resData
					};
					this.showPie("canvasPie", chartData);
				}).catch((err) => {
					console.log(err);
					uni.hideLoading()
					uni.showModal({
						content: `查询失败，错误信息为：${err.message}`,
						showCancel: false
					})
				})
			},
			getExcelData() {
				uniCloud.callFunction({
					name: 'company_collect_excel',
					data: {
						company: this.userInfo.company_no,
						day: this.nowDay
					}
				}).then((res) => {
					console.log(res)
					uni.hideLoading()
					if (res.result.status == 1) {
						this.json_data = res.result.excelData;
					}

				}).catch((err) => {
					console.log(err);
					uni.showModal({
						content: `查询失败，错误信息为：${err.message}`,
						showCancel: false
					})
				})
			},
			showPie(canvasId, chartData) {
				canvaPie = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'pie',
					fontSize: 11,
					legend: {
						show: true,
						float: 'center',
						padding: 5,
						lineHeight: 15,
						margin: 5,
						borderWidth: 1
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					dataLabel: true,
					extra: {
						pie: {
							lableWidth: 15
						}
					},
				});
			},
			touchPie(e) {
				canvaPie.showToolTip(e, {
					format: function(item) {
						return item.name
					}
				});
			},
			quitLogin() {
				this.logout();
				uni.navigateTo({
					url: '../../user/login'
				});
			},
		},		
		onShow() {
			console.log('用户信息：', this.userInfo);
			if (this.hasLogin) {
				this.getData();
				this.getExcelData();
			} else {
				this.quitLogin();
			}
		}
	}
</script>

<style>
	.action-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 10rpx;
	}

	.action-row el-button {
		color: #007aff;
		padding: 0 10px;
		font-size: 30rpx;
	}

	.action-row navigator {
		color: #007aff;
		padding: 0 10px;
		font-size: 30rpx;
	}

	page {
		background: #F2F2F2;
		width: 750upx;
		overflow-x: hidden;
	}

	.companyInfo {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
	}

	.linkTxt {
		color: #007aff;
		display: inline;
	}

	.qiun-padding {
		padding: 2%;
		width: 96%;
	}

	.qiun-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}

	.qiun-columns {
		display: flex;
		flex-direction: column !important;
	}

	.qiun-common-mt {
		margin-top: 10upx;
	}

	.qiun-bg-white {
		background: #FFFFFF;
	}

	.qiun-title-bar {
		width: 96%;
		padding: 10upx 2%;
		flex-wrap: nowrap;
	}

	.qiun-title-dot-light {
		border-left: 10upx solid #0ea391;
		padding-left: 10upx;
		font-size: 32upx;
		color: #000000
	}

	.qiun-charts {
		width: 750upx;
		height: 750upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 750upx;
		background-color: #FFFFFF;
	}

	.noData {
		color: #888888;
		text-align: center;
		font-size: 14px;
		line-height: 10;
	}
	
	.qrcode {
		width: 150px;
		height: 150px;
	}
</style>
